<!-- 编辑器 -->
<template>
  <div class="">
    <div class="editor-bj" :style="{height:initH+'px'}">
      <span class="z9 fz12 dsfsdtteww">{{titletext}}</span>
      <DraggableContainer :adsorbCols="roiuwe" :adsorbRows="sorbRows" referenceLineColor="#e0e0e0">
        <draggable class="dragArea list-group " :style="{height:initH+'px'}" :list="list1" @change="changeFuna"
          group="people">
          <template #item="{ element, index }">
            <Vue3DraggableResizable class="sz" :w="element.w" :h="element.h" :x="element.x" :y="element.y"
              @resize-end="resizefun($event, element)" @drag-end="dragFun($event, element)"
              @click.stop="setproperty(element)" @keydown="keydownfun($event, index, element)">
              <!-- <div v-if="element.typeid == 0" class="w100 h100">
                <span class="textareadfer" :style="fontStle(element)">
                  {{ element.val }}
                </span>
              </div> -->
              <textarea class="kjnmkjser" v-model='element.val' v-if="element.typeid == 0" :style="fontStle(element)">
            </textarea> 
              <input placeholder="文本内容" class="kjnmkjser" v-model='element.val' v-if="element.typeid == 1"
                :style="fontStle(element)" />

              <!-- <textarea v-if="element.typeid == 1" v-model="element.val" class="textareadfer"
                :style="fontStle(element)"></textarea> -->
              <div class="w100 h100" v-if="element.typeid == 2" contenteditable="true">
                <img v-if="element.imgUrl" :src="element.imgUrl" :style="ImgStle(element)" class="editor-img-Box" />
                <div v-else class="w100 h100 fz22 ov z9 vertical-center editor-img-Box" :style="ImgStle(element)">
                  {{ element.w }}*{{ element.h }}
                </div>
              </div>
              <div v-if="element.typeid == 3" class="kjnkseerew" contenteditable="true">
                <n-carousel v-if="element.imgUrlList">
                  <img class="carousel-img" :style="ImgStle(element)" :src="item"
                    v-for="(item, id) in element.imgUrlList" :key="id" />
                </n-carousel>
                <div v-else class="w100 h100 fz22 ov z9 vertical-center editor-img-Box">
                  {{ element.w }}*{{ element.h }}
                </div>
              </div>

              <n-checkbox-group v-if="element.typeid ==4" :style="fontStle(element)">
                <n-space item-style="display: flex;">
                  <n-checkbox :value="ites" :label="ites" v-for="(ites,idx) in element.option.split(',')" />
                </n-space>
              </n-checkbox-group>


              <n-radio-group v-if="element.typeid ==5" :style="fontStle(element)">
                <n-space>
                  <n-radio :value="ites" :label="ites" v-for="(ites,idx) in element.option.split(',')">
                    {{ites}}
                  </n-radio>
                </n-space>
              </n-radio-group>
            </Vue3DraggableResizable>
          </template>
        </draggable>
      </DraggableContainer>
    </div>

  </div>
</template>
<script lang="ts" setup>
import { ref } from "vue";
import { fontStle, ImgStle, checkboxtle } from "../../../util/index";
import draggable from "vuedraggable";

import Vue3DraggableResizable from "vue3-draggable-resizable";
import { DraggableContainer } from "vue3-draggable-resizable";
import "vue3-draggable-resizable/dist/Vue3DraggableResizable.css";
const emit = defineEmits(["close", "successFun", 'getObj']);
const props = defineProps({
  titletext: { type: String },
  initH: { type: Number },
  initData: { type: Array, default: [] },
  initLeft: { type: Boolean,default: false },
});
const obj = ref(); // 这个传到右侧的菜单
const list1 = ref([]);
const list2 = ref([]);
const dqObj = ref();
const roiuwe = ref([]);
const sorbRows = ref([]);
for (let i = 0; i < 30; i++) {
  roiuwe.value.push(i * 40);
}
for (let i = 0; i < 100; i++) {
  sorbRows.value.push(i * 50);
}
if (props.initData.length > 0) {
  list1.value = props.initData;
  console.log(props.initData);
}
// 宽度高度改变后触发
const resizefun = (data, item) => {
  item.x = data.x;
  item.y = data.y;
  item.w = data.w;
  item.h = data.h;
};
// 拖动结束后触发
const dragFun = (data, item) => {
  item.x = data.x;
  item.y = data.y;
};

const setproperty = (data) => {
  console.log(data);
  obj.value = data;
  emit('getObj', data)
};

const keydownfun = (data, idx, element) => {
  console.log(data.code);
  switch (data.code) {
    case "ArrowUp":
      element.y--;
      break;
    case "ArrowDown":
      element.y++;
      break;
    case "ArrowLeft":
      element.x--;
      break;
    case "ArrowRight":
      element.x++;
      break;
  }

  if (data.code == "Delete") {
    list1.value.splice(idx, 1);
    obj.value = "";
  }
};
const changeFuna = (data) => {
  let dqobj = list1.value.filter(
    (a) => a.addTime == data.added.element.addTime
  )[0];
  console.log(dqobj);
  if (event.offsetY < 0||props.initLeft) {
    dqobj.y = 0;
    dqobj.x = 0;
    return
  }

  console.log(event);
  switch (dqobj.typeid) {
    case 0:
      dqobj.y = event.offsetY;
      dqobj.x = event.offsetX;
      break;
    case 1:
    case 2:
    case 4:
    case 5:
      dqobj.y = event.offsetY - dqobj.h / 2;
      dqobj.x = event.offsetX - dqobj.w / 2;
      break;
    case 3:
      dqobj.y = event.offsetY - dqobj.h / 2;
      dqobj.x = 0;
      break;
  }
};


defineExpose({
  getDatas() {
    return list1.value
  }
})
</script>
<style scoped>
.dsfsdfsde {
  position: absolute;
  right: 0;
}

.editor-page {
  position: fixed;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background: #fff;
  z-index: 9999;
  overflow: auto;
}

.editor-bj {
  width: 900px;
  box-shadow: 0 0px 4px rgba(0, 0, 0, 0.1);
  margin: auto;
  overflow: auto;
  position: relative;
  left: -50px;
}

.title {
  text-align: center;
  color: #42b983;
}

.wrapper {
  display: flex;
  justify-content: center;
  width: 100%;
}

.item {
  width: 100px;
  height: 100px;
  font-size: 50px;
  text-align: center;
  line-height: 100px;
  margin: 10px;
  background-color: #42b983;
  color: #ffffff;
}

.manipulation-menu {
  position: fixed;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 60px;
  background: #fff;
  box-shadow: 0 -5px 5px rgba(0, 0, 0, 0.1);
  z-index: 999;
}

.manipulation-menu-context {
  width: 1200px;
  margin: auto;
  line-height: 60px;
}

.dsfsdtteww {
  position: absolute;
  right: 5px;
  top: 5px;
}

.kjnmkjser {
  border: 0;
  cursor: pointer;
  overflow: hidden;
  resize: none
}

.textareadfer {
  border: 0;
  cursor: pointer;
}
</style>
